<template>
  <div class="flow-row">
    <div class="flow-box">
      <div class="flow-item" :class="{ 'flow-item-active': state.isActive }" @click="!readable && open('flowCopyerSetting', node)">
        <div class="flow-node-box" :class="{ 'has-error': node.error }">
          <div class="node-name" :class="nameClass(node, 'node-cc')">
            <EditName v-model="state.name" />
            <SvgIcon name="ele-Position" :size="20" style="margin-left: 10px"  />
          </div>
          <div class="node-main">
            <span v-if="node.content">
              抄送人:
              <el-tooltip effect="dark" placement="top" :content="node.content">
								{{ node.content }}
							</el-tooltip>
            </span>
            <span v-else class="hint-title">设置此节点</span>
          </div>
          <!-- 错误提示 -->
					<SvgIcon v-if="node.error" name="ele-WarningFilled" class="node-error" />
					<div v-if="!props.readable && !state.deletable" class="close-icon">
						<SvgIcon name="ele-CircleClose" @click.stop="state.deletable = true" />
					</div>
					<!-- 删除提示 -->
					<DeleteConfirm :node="node" v-model="state.deletable" />
        </div>
      </div>
      <FlowAddNode :node="node" :nodeType="2" :readable="readable" />
    </div>
  </div>
</template>
<script lang="ts" setup name="FlowCopyerNode">
  import FlowAddNode from '../add/index.vue';
  //import FlowCopyerSetting from '../../flowDrawer/copyer/index.vue';
  import EditName from '../../common/EditName.vue';
  import DeleteConfirm from '../../common/DeleteConfirm.vue';
const props = defineProps({
	node: {
    type: Object,
    default: function() {
      return {};
    },
  },
  readable: {
    type: Boolean,
    default: false,
  },
});
const state = reactive({
	isActive: false,
	deletable: false,
	name: props.node.name,
});
watch(
	() => props.node,
	() => {
		state.isActive = false;
		state.deletable = false;
	},
	{
		deep: true,
	}
);
watch(
	() => state.name,
	(val: any) => {
		// 将对应的审批节点的添加按钮开启
		let currNode = props.node;
		$store.flow.UP_NODE({ currNode, field: 'name', value: val });
	},
	{
		deep: true,
	}
);
/**
 * 节点头部样式
 * @returns
 */
function nameClass(node, defaultStyle) {
	if (node.status == -1) {
		return defaultStyle;
	}
	return { 'node-status-not': node.status == 0, 'node-status-current': node.status == 1, 'node-status-complete': node.status == 2 };
}
</script>
